﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="About.aspx.cs" Inherits="Web.About.NewAbout.about" %>
<%@ Register Src="~/AboutControl/sidebar.ascx" TagPrefix="uc1" TagName="sidebar" %>
<%@ Register Src="~/AboutControl/footer.ascx" TagPrefix="uc1" TagName="footer" %>
<%@ Register Src="~/AboutControl/state.ascx" TagPrefix="uc1" TagName="state" %>
<%@ Register Src="~/AboutControl/headers.ascx" TagPrefix="uc1" TagName="headers" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <meta name="keywords" content="恒信人才,恒信网聘,恒信猎头,恒信派遣,恒信培训,恒信家政"/>
    <meta name="description" content="恒信人才目前是浙江省内最具规模和影响力的专业人力资源公司,全力引进优秀人才,支持浙江新的腾飞!"/>
    <meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=yes" name="format-detection"/>
    <meta name="renderer" content="webkit"/>
    <meta content="email=no" name="format-detection"/>
    <link href="css/all.css" rel="stylesheet" />    
    <link href="css/media.css" rel="stylesheet" /><!--各个浏览器响应式属性-->
    <link href="css/animation.css" rel="stylesheet" /><!--图片渐变键入效果样式-->
    <link href="css/base.css" rel="stylesheet" /><!--默认样式重置-->
    <link rel="stylesheet" href="css/lrtk.css" /><!--banner样式-->
    <link href="css/scroll.css" rel="stylesheet" /><!--默认样式重置-->

    <!-- 引入 swiper 核心样式 -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> 

    <script src="js/jquery.js"></script><!--Jquery1.10.1库-->
    <!-- 引入 swiper 核心脚本（放 jQuery 之后，index.js 之前） -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> 
    <script src="js/waypoints.min.js" type="text/javascript"></script><!--滚动监听--> 
    <script src="js/index.js" type="text/javascript"></script><!--滚动监听--> 
    <script src="js/scroll.js" type="text/javascript"></script><!--轮播图--> 
    
</head>  
  <style>
.m-nav{
  position: absolute;
}
    /* 顶部 banner 图 */
    .top-banner {
      width: 100%;
      /* background: url(/images/about/city-bg.png) center center no-repeat;
      background-size: cover; */
      position: relative;
    }
     .top-banner img{

      width: 100%;
     }

    /* .top-banner::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
    } */

    .banner-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-size: 36px;
      font-weight: bold;
      z-index: 1;
    }

    /* 导航栏 */
    .nav {
      width: 100%;
      background-color: white;
      border-bottom: 1px solid #eee;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }

    .nav-container {
        margin-left: 80px;
    }

    .nav ul {
      display: flex;
    }

    .nav li {
      list-style: none;
      padding: 18px 25px;
      cursor: pointer;
      color: #666;
      transition: all 0.3s ease;
      position: relative;
    }

    .nav li:hover {
      color:   var(--secondary-color);
    }

    .nav li.active {
      color:   var(--secondary-color);
    }

    .nav li.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background-color:   var(--secondary-color);
    }


    /* 各部分通用样式 */
    .section {
      /* margin: 80px; */
        padding: 80px;

      scroll-margin-top: 80px;
      background: var(--white-color);
    }
 .honor-section{
     padding: 80px 0;
 }
    .compony-center{
        padding-bottom: 20px;
    }
       .compony-center .tt_icon {
            color: rgba(221,161,94,0.1);
        }
@media (max-width: 1700px) {
    .f_64 {
        font-size: 40px;
    }
}
.city-title{
     font-size: 28px;
      color: #000;
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 10px;
      display: inline-block;
}
.honor-title{
    width: 100%;
    text-align: center;
      font-size: 28px;
      color: #000;
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 10px;
      display: inline-block;
}

    .section-title {
        width: 100%;
      font-size: 28px;
      color: #fff;
      text-align: center;
      margin-bottom: 30px;
      padding-bottom: 10px;
      display: inline-block;
    }

    /* 公司介绍 */
    .company-intro {
      display: flex;
      justify-content: space-between;
      gap: 40px;
    }

    .intro-text {
      width:50%;
      line-height: 1.8;
      font-size: 16px;
    }

    .intro-text p {
      margin-bottom: 20px;
    }

    .intro-video {
      width: 42%;
      border-radius: 5px;
      overflow: hidden;
    }

    .intro-video video {
      width: 100%;
      height: auto;
      display: block;
    }




    /* 客户的难题 */
    .corporate-section{
      padding: 80px;
    }
      .corporate-section h2{
       line-height: 30px;
    color: #5b626c;
    font-size: 30px;
    display: inline-block;
    position: relative;
    }
      .corporate-section h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.2rem;
    height: 4px;
    width: 60px;
    background-color: var(--secondary-color);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
    .corporate-culture {
      display: flex;
      justify-content: space-between;
      gap: 50px;
      margin-top: 30px;
    }
    .culture-item {
      width: 15%;
      flex: 1;
      text-align: center;
      padding: 40px 70px 100px ;
       background: #fff;
      border-radius: 8px;
      transition: all 0.3s ease;
    box-shadow: 0 0 0.15rem rgba(0, 0, 0, .05);
    }
    .culture-item h3 {
      font-size: 40px;
      margin-bottom:50px;
      color: rgba(65, 75, 91, 0.5);
      transition: transform 0.3s ease;
      position: relative;
    }
    .culture-item:hover{
     transform: scale(1.2);

       background: -webkit-linear-gradient(75deg, var(--secondary-color), #eee1bd);
     
    }
    .culture-item:hover h3 {
    color:rgba(65, 75, 91, 0.2);

    }
     .culture-item:hover p {
    color:#fff;

    }

    .culture-item p {
      color: #5b626c;
      font-size: 16px;
      line-height: 30px;
      transition: transform 0.3s ease;
    }

    .culture-item:hover p {
      transform: translateY(-5px);
    }
    /* 我们的产品 */
    .development-history {
      padding: 80px 0;
      background: #fff;
    }
       .development-history  h2{
       line-height: 30px;
    color: #5b626c;
    font-size: 30px;
    display: inline-block;
    position: relative;
    }
       .development-history  h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.2rem;
    height: 4px;
    width: 60px;
    background-color: var(--secondary-color);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
    
.product{
  margin-top: 10px;
    color: #5b626c;
    line-height: 18px;
    padding: 0px 80px;
    font-size: 14px;

}
.product-center{
  width: 100%;
    display: block;
    margin-top: 40px;
    z-index: 9;
    overflow: hidden;
    position: relative;
}
.product-content{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: none;
    padding: 0px;
}
.product-content .left-line,.product-content .right-line {
    position: absolute;
    top: 54%;
    width:229px;
    transform: translateY(-50%);
    z-index: -1;
    height: 1px;
    background-color: rgb(229, 229, 229);
}
.product-content .left-line {
    left: 0px;

}
.product-content .right-line {
    right: 0px;
   
}
.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
}
.swiper-wrapper{
  z-index: 1;
    display: flex
;
    box-sizing: content-box;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    justify-content: center;
}
.swiper-slider{
  height: 100%;
    position: relative;
    transition-property: transform;
    width: 200px;
    margin-top: 60px;
}
.animate-item{
  animation-duration: 1s;
    animation-fill-mode: both;
}
.icon-item{
     width: 125px;
     height:125px;
    z-index: 9;
    margin: 0px auto;
    display: flex
;
    align-items: center;
    justify-content: center;
    position: relative;
}
.icon-item img {
  width:55px;
    height: 55px;
}



.icon-item::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url(/images/solution/produce0.png) center center / 100% no-repeat rgb(255, 255, 255);
    /* background-size:108px 108px ; */
    border-radius: 50%;
}
.txt{
  width: 100%;
  text-align: center;
  color: rgb(65, 75, 91);
    margin-top: 15px;
}
.swiper-slider .swiper-line{
  height: 1px;
    width: 20%;
    background-color: #e5e5e5;
    position: absolute;
    top: 71px;
    z-index: -1;
    right:-42px;
    width: 86px;
}
.none-line .swiper-line{
  width: 0;
}
.swiper-slider .swiper-l-line{
  height: 1px;
    width: 20%;
    background-color: #e5e5e5;
    position: absolute;
    top: 71px;
    z-index: -1;
    left:-42px;
    width:0;
}
.swiper-slider .line {
    transition: all 0.5s ease;
}
.swiper-l-line{
  width: 0;
}

.swiper-slider:hover .lline{
      width:86px;
      top: 15px;
    left: -55px;
    animation: rotatel30 2s ease forwards;
}

.swiper-slider:hover {
  transform: translateY(-60px);
}
.swiper-slider:hover .icon-item::after {
    animation: rotate 2s ease forwards;
}
.swiper-slider:hover .line {
   width: 86px;
    top: 15px;
    right: -55px;
    animation: rotate20 2s ease forwards;
}
.swiper-slider:hover ~ .swiper-slider .line {
 width: 0;
}
 /* 关键帧动画 */
  @keyframes rotate {
      from {
          transform: rotate(0deg);
      }
      to {
          transform: rotate(90deg);
      }
  }
   @keyframes rotatel30 {
      from {
          transform: rotate(0deg);
      }
      to {
          transform: rotate(-39deg);
      }
  }
    @keyframes rotate20 {
      from {
          transform: rotate(0deg);
      }
      to {
          transform: rotate(30deg);
      }
  }
    /* 我们的优势 */
    .advantage-section{
      padding: 80px;
    }
      .advantage-section h2{
       line-height: 30px;
    color: #5b626c;
    font-size: 30px;
    display: inline-block;
    position: relative;
    }
      .advantage-section h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -0.2rem;
    height: 4px;
    width: 60px;
    background-color: var(--secondary-color);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
  .advantage-section  .corporate-culture {
      display: flex;
      justify-content: space-between;
      gap: 50px;
      margin-top: 30px;
    }
   .advantage-section .culture-item {
      width: 15%;
      flex: 1;
      text-align: center;
      padding: 40px 70px 100px ;
       background: #fff;
      border-radius: 8px;
      transition: all 0.3s ease;
    box-shadow: 0 0 0.15rem rgba(0, 0, 0, .05);
    }
   .advantage-section .culture-item h3 {
      font-size: 40px;
      margin-bottom:50px;
      color: rgba(65, 75, 91, 0.5);
      transition: transform 0.3s ease;
      position: relative;
    }
   .advantage-section .culture-item:hover{
     transform: scale(1.2);

       background: -webkit-linear-gradient(75deg, var(--secondary-color), #eee1bd);
     
    }
   .advantage-section .culture-item:hover h3 {
    color:rgba(65, 75, 91, 0.2);

    }
  .advantage-section   .culture-item:hover p {
    color:#fff;

    }

  .advantage-section  .culture-item p {
      color: #5b626c;
      font-size: 16px;
      line-height: 30px;
      transition: transform 0.3s ease;
    }

  .advantage-section  .culture-item:hover p {
      transform: translateY(-5px);
    }
    /* 联系我们 */
    .contact-us {
      background-color: #f9f9f9;
      padding: 40px;
      border-radius: 8px;
      margin-top: 30px;
    }

    .contact-info {
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      margin-top: 20px;
    }

    .contact-item {
      flex: 1;
      min-width: 250px;
    }

    .contact-item h3 {
      font-size: 18px;
      margin-bottom: 15px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .contact-item h3 i {
      color:   var(--secondary-color);
      font-size: 20px;
    }

    .contact-item p {
      margin-bottom: 10px;
      color: #666;
    }

    /* 动画 */
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {
        .slittle-tit{
            font-size: 20px;
        }
        .intro-text{
            font-size: 14px;

        }
        .swiper-slider{
              width: 150px;
          }
        .icon-item{
              width: 108px;
              height:108px;
          }
          .icon-item img {
            width: 47px;
              height: 47px;
          }
          .swiper-slider .swiper-line{
            width: 20%;
            top: 54px;
             right:-42px;
          }
          .swiper-slider .swiper-l-line{
            top: 54px;
            left:-42px;
            width:0;
        }
        .swiper-slider:hover .lline{
      width:70px;
      top: 15px;
    left: -55px;
    animation: rotatel30 2s ease forwards;
}
.swiper-slider:hover .line {
   width: 70px;
    top: 15px;
    right: -55px;
    animation: rotate20 2s ease forwards;
}

    }

    @media (max-width: 992px) {
      .company-intro {
        flex-direction: column;
      }
      
      .intro-text, .intro-video {
        width: 100%;
      }
      
      .corporate-culture {
        flex-direction: column;
      }
    }

    @media (max-width: 768px) {
      .nav li {
        padding: 15px 12px;
        font-size: 14px;
      }
      
      .top-banner {
        height: 200px;
      }
      
      .banner-title {
        font-size: 28px;
      }
      
      /* .development-history {
        height: 350px;
      } */
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
     <uc1:headers runat="server" id="headers" />
<uc1:sidebar runat="server" ID="sidebar" />
  <!-- 顶部 banner 图 -->
  <div class="top-banner">
    <img src="/images/solution/online_bg.jpg" alt="">
    <div class="banner-title">网络招聘</div>
  </div>

  <!-- 导航栏 -->
  <div class="nav">
    <div class="nav-container">
      <ul>
        <li class="active" data-target="company-intro">
          <a href="#company-intro" style="text-decoration: none; color: inherit;">客户的难题</a>
        </li>
        <li data-target="development-history">
          <a href="#development-history" style="text-decoration: none; color: inherit;">我们的产品</a>
        </li>
        <li data-target="advantage">
          <a href="#advantage" style="text-decoration: none; color: inherit;">我们的优势</a>
        </li>
        <li data-target="enterprise-honor">
          <a href="#enterprise-honor" style="text-decoration: none; color: inherit;">我们的价值</a>
        </li>
        <li data-target="contact-us">
          <a href="#contact-us" style="text-decoration: none; color: inherit;">服务案例</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 内容容器 -->
  <div class="container">
    <!-- 客户的难题 -->
    <div id="company-intro" class="corporate-section">
        <div>

      <h2 class="section-title">客户的难题</h2>
      <div class="corporate-culture">
          <div class="culture-item">
              <h3>01</h3>
              <p>简历匹配度低 & 虚假简历泛滥</p>
              <p>外地简历占比高（30%以上虚假/僵尸用户），面试转化率不足</p>
          </div>
          <div class="culture-item">
              <h3>02</h3>
              <p>综合招聘成本过高</p>
              <p>年均成本超8000元（含平台费+人事筛选耗时）</p>
          </div>
          <div class="culture-item">
              <h3>03</h3>
              <p>区域覆盖能力不足 </p>
              <p>传统渠道普工触达率不足35%，同时白领用工需求难满足</p>
          </div>
          <div class="culture-item">
              <h3>04</h3>
              <p>招聘流程低效耗时</p>
              <p>传统流程平均耗时28天，岗位空缺日均损失超5000元</p>
          </div>
          </div>
        </div>

    </div>

    <!-- 我们的产品 -->
    <div id="development-history" class="development-history">
       <div>

      <h2 class="section-title">我们的产品</h2>
     <div class="product">
      "作为金华优质数字化招聘解决方案提供商，成立23年以来，以「懂本地企业，更
懂金华人」的服务理念，独创「AI智能匹配+属地化人工服务」双引擎模式，累计
为364,093家本土企业精准输送人才，助力1,481,344名求职者实现职业跃迁。"

     </div>
     <div class="product-center">
        <div class="product-content">
          <div class="left-line"></div>
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slider">
                <div class="swiper-l-line lline" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce1.png" alt="">
                  </div>
                  <div class="txt">专业咨询与服务<br>诊断</div>
                </div>
                <div class="swiper-line line" ></div>
              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce2.png" alt="">
                  </div>
                  <div class="txt">定制相应的人力<br>资源服务流程</div>
                </div>
                <div class="swiper-line line" style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce3.png" alt="">
                  </div>
                  <div class="txt">稳定的服务<br>质量</div>
                </div>
                <div class="swiper-line line" style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce4.png" alt="">
                  </div>
                  <div class="txt">定期的服务评估<br>与持续渐进</div>
                  
                </div>
                <div class="swiper-line line" style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce5.png" alt="">
                  </div>
                  <div class="txt">伴随企业发展，提供<br>可拓展的体系化<br>服务支持</div>
                </div>
                <div class="swiper-line line" style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce6.png" alt="">
                  </div>
                  <div class="txt">管理并跟踪客户<br>需求变化</div>
                </div>
                <div class="swiper-line line" style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
               <div class="swiper-slider">
                <div class="swiper-l-line lline" ></div>

                <div class="animate-item">
                  <div class="icon-item">
                    <img src="/images/solution/produce7.png" alt="">
                  </div>
                  <div class="txt">提供全面的<br>服务信息交付<br>支持平台</div>
                </div>
                <div class="swiper-line line" style="transform: rotate(0deg) translate(0px, 0px); opacity: 1;"></div>

              </div>
            </div>
          </div>
          <div class="right-line"></div>
        </div>
     </div>

    </div>
    </div>
    <div class="container">
    <!-- 我们的优势 -->
    <div id="advantage" class="advantage-section">
        <div>

      <h2 class="section-title">我们的优势</h2>
      <div class="corporate-culture">
          <div class="culture-item">
              <h3>01</h3>
              <p>简历匹配度低 & 虚假简历泛滥</p>
              <p>外地简历占比高（30%以上虚假/僵尸用户），面试转化率不足</p>
          </div>
          <div class="culture-item">
              <h3>02</h3>
              <p>综合招聘成本过高</p>
              <p>年均成本超8000元（含平台费+人事筛选耗时）</p>
          </div>
          <div class="culture-item">
              <h3>03</h3>
              <p>区域覆盖能力不足 </p>
              <p>传统渠道普工触达率不足35%，同时白领用工需求难满足</p>
          </div>
          <div class="culture-item">
              <h3>04</h3>
              <p>招聘流程低效耗时</p>
              <p>传统流程平均耗时28天，岗位空缺日均损失超5000元</p>
          </div>
          </div>
        </div>

    </div>


    <!-- 企业荣誉 -->
    <div id="enterprise-honor" class="honor-section">
      <h2 class="honor-title">企业荣誉</h2>
    <div id="honor-2002" class="honor-content ">
        <h4>2002</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2003" class="honor-content ">
        <h4>2003</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2004" class="honor-content ">
        <h4>2004</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2005" class="honor-content ">
        <h4>2005</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2006" class="honor-content ">
        <h4>2006</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2007" class="honor-content ">
        <h4>2007</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2008" class="honor-content ">
        <h4>2008</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2009" class="honor-content ">
        <h4>2009</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2010" class="honor-content ">
        <h4>2010</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2011" class="honor-content ">
        <h4>2011</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2012" class="honor-content ">
        <h4>2012</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2013" class="honor-content ">
        <h4>2013</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2014" class="honor-content ">
        <h4>2014</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2015" class="honor-content ">
        <h4>2015</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
        <div id="honor-2016" class="honor-content ">
        <h4>2016</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
        <div id="honor-2017" class="honor-content ">
        <h4>2017</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2018" class="honor-content ">
        <h4>2018</h4>
        <p>公司荣获"义乌市人力资源服务优质企业"称号，凭借专业的招聘服务，助力多家本地制造业企业解决人才短缺问题，服务案例入选行业优秀实践案例。同年，公司服务企业突破1000家，成为义乌地区最具影响力的人力资源服务机构之一。</p>
      </div>
      <div id="honor-2019" class="honor-content">
        <h4>2019</h4>
        <p>拓展劳务派遣业务，建立标准化服务流程，被评为"劳务派遣合规示范单位"，为上百家企业提供合规用工支持。公司通过ISO9001质量管理体系认证，服务质量得到国际标准认可，客户满意度达到98%以上。</p>
      </div>
      <div id="honor-2020" class="honor-content">
        <h4>2020</h4>
        <p>推出线上人才匹配系统，实现人才与岗位智能精准对接，荣获"数字化人力资源服务创新奖"，有效提升招聘效率30%。疫情期间，积极参与"稳就业"行动，帮助5000余名劳动者实现就业，被评为"就业服务先进单位"。</p>
      </div>
      <div id="honor-2021" class="honor-content">
        <h4>2021</h4>
        <p>成立人才培训事业部，开展定制化企业内训和职业技能培训，被授予"企业人才培育优秀合作机构"，累计培训人才超2000人次。公司党支部被评为"先进基层党组织"，党建引领企业发展成效显著。</p>
      </div>
      <div id="honor-2022" class="honor-content">
        <h4>2022</h4>
        <p>深化人事代理服务，打造全流程数字化人事服务平台，获评"人事代理服务标杆企业"，服务企业覆盖义乌各大产业集群。公司当选为义乌市人力资源服务行业协会副会长单位，积极推动行业规范化发展。</p>
      </div>
      <div id="honor-2023" class="honor-content">
        <h4>2023</h4>
        <p>构建人力资源生态服务体系，整合人才招聘、培训、外包等服务，荣获"浙中地区人力资源服务领军企业"称号，助力区域人才生态建设。公司服务网络扩展至金华、东阳、永康等周边城市，服务能力进一步提升。</p>
      </div>
      <div id="honor-2024" class="honor-content active">
        <h4>2024</h4>
        <p>聚焦高端人才猎聘，成立专业猎头团队，为本地重点企业引进多名行业高端人才，推动企业创新发展，获得"高端人才服务突出贡献奖"。公司被评为"浙江省人力资源服务行业AAA级信用单位"，品牌影响力进一步扩大。</p>
      </div>
      <div class="honor-line">

        <div class="honor-timeline">
            <div class="timeline-item " data-target="honor-2002">
                <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2002
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2003">  
                <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2003
                </div></div>
            <div class="timeline-item " data-target="honor-2004">
                 <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2004
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2005">
                 <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2005
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2006">
                 <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2006
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2007">
                 <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2007
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2008">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2008
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2009">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2009
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2010">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2010
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2011">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2011
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2012">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2012
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2013">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2013
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2014">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2014
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2015">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2015
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2016">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2016
                </div>
            </div>
            <div class="timeline-item " data-target="honor-2017">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2017
                </div>
            </div>
              <div class="timeline-item " data-target="honor-2018">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2018
                </div>
            </div>
            <div class="timeline-item" data-target="honor-2019">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2019
                </div>
            </div>
            <div class="timeline-item" data-target="honor-2020">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2020
                </div>
            </div>
            <div class="timeline-item" data-target="honor-2021">
                   <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2021
                </div>
            </div>
            <div class="timeline-item" data-target="honor-2022">
                 <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2022
                </div>
            </div>
            <div class="timeline-item" data-target="honor-2023">
                 <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2023
                </div>
            </div>
            <div class="timeline-item active" data-target="honor-2024">
                 <div class="line">
                    <span></span>
                </div>
                <div class="year">
                    2024
                </div>
            </div>
        </div>
      </div>

    </div>
    </div>
  </div>
        <uc1:footer runat="server" ID="footer" />
        <uc1:state runat="server" ID="state" />
  <script>
    // 导航栏激活状态
    $(window).scroll(function() {
      const scrollPosition = $(window).scrollTop() + 100;
      
      $('.section').each(function() {
        const sectionTop = $(this).offset().top;
        const sectionId = $(this).attr('id');
        
        if (scrollPosition >= sectionTop) {
          $('.nav li').removeClass('active');
          $(`.nav li[data-target="${sectionId}"]`).addClass('active');
        }
      });
    });

    // 发展历程图片拖动功能
    const historyImage = document.querySelector('.history-image');
    let isDragging = false;
    let startX;
    let scrollLeft;

    historyImage.addEventListener('mousedown', (e) => {
      isDragging = true;
      historyImage.classList.add('dragging');
      startX = e.pageX - historyImage.offsetLeft;
      scrollLeft = historyImage.offsetLeft;
      historyImage.style.cursor = 'grabbing';
    });

    historyImage.addEventListener('mouseleave', () => {
      isDragging = false;
      historyImage.classList.remove('dragging');
      historyImage.style.cursor = 'grab';
    });

    historyImage.addEventListener('mouseup', () => {
      isDragging = false;
      historyImage.classList.remove('dragging');
      historyImage.style.cursor = 'grab';
    });

    historyImage.addEventListener('mousemove', (e) => {
      if (!isDragging) return;
      e.preventDefault();
      const x = e.pageX - historyImage.offsetLeft;
      const walk = (x - startX) * 1; // 拖动速度
      
      // 计算图片最大可拖动距离
      const wrapperWidth = document.querySelector('.history-wrapper').offsetWidth;
      const imageWidth = historyImage.offsetWidth;
      const maxLeft = 0;
      const maxRight = wrapperWidth - imageWidth;
      
      // 限制拖动范围
      let newLeft = scrollLeft + walk;
      if (newLeft > maxLeft) newLeft = maxLeft;
      if (newLeft < maxRight) newLeft = maxRight;
      
      historyImage.style.left = newLeft + 'px';
    });

    // 触摸设备支持
    historyImage.addEventListener('touchstart', (e) => {
      isDragging = true;
      startX = e.touches[0].pageX - historyImage.offsetLeft;
      scrollLeft = historyImage.offsetLeft;
    }, { passive: true });

    historyImage.addEventListener('touchend', () => {
      isDragging = false;
    });

    historyImage.addEventListener('touchmove', (e) => {
      if (!isDragging) return;
      const x = e.touches[0].pageX - historyImage.offsetLeft;
      const walk = (x - startX) * 1;
      
      const wrapperWidth = document.querySelector('.history-wrapper').offsetWidth;
      const imageWidth = historyImage.offsetWidth;
      const maxLeft = 0;
      const maxRight = wrapperWidth - imageWidth;
      
      let newLeft = scrollLeft + walk;
      if (newLeft > maxLeft) newLeft = maxLeft;
      if (newLeft < maxRight) newLeft = maxRight;
      
      historyImage.style.left = newLeft + 'px';
    }, { passive: false });

    // 企业荣誉时间轴交互
    const timelineItems = document.querySelectorAll('.timeline-item');
    const honorContents = document.querySelectorAll('.honor-content');

    timelineItems.forEach(item => {
      // 点击事件
      item.addEventListener('click', () => {
        const target = item.getAttribute('data-target');
        
        // 更新时间轴激活状态
        timelineItems.forEach(i => i.classList.remove('active'));
        item.classList.add('active');
        
        // 更新内容显示
        honorContents.forEach(content => content.classList.remove('active'));
        document.getElementById(target).classList.add('active');
      });
      
      // 鼠标滑过事件
      item.addEventListener('mouseenter', () => {
        // 自动滚动到当前项
        // item.scrollIntoView({
        //   behavior: 'smooth',
        //   block: 'nearest',
        //   inline: 'center'
        // });
        
        // 延迟一点时间再激活，让滚动完成
        setTimeout(() => {
          const target = item.getAttribute('data-target');
          
          // 更新时间轴激活状态
          timelineItems.forEach(i => i.classList.remove('active'));
          item.classList.add('active');
          
          // 更新内容显示
          honorContents.forEach(content => content.classList.remove('active'));
          document.getElementById(target).classList.add('active');
        }, 300);
      });
    });
    // 获取时间轴容器
const timeline = document.querySelector('.honor-timeline');
let istimeDragging = false;
let timestartX;
let timescrollLeft;

// 鼠标按下事件
timeline.addEventListener('mousedown', (e) => {
    istimeDragging = true;
    timestartX = e.pageX - timeline.offsetLeft;
    timescrollLeft = timeline.scrollLeft;
    timeline.style.cursor = 'grabbing';
});

// 鼠标移动事件
timeline.addEventListener('mousemove', (e) => {
    if (!istimeDragging) return;
    e.preventDefault();
    const x = e.pageX - timeline.offsetLeft;
    const walk = (x - timestartX) * 1; // 拖动速度
    const newScrollLeft = timescrollLeft - walk;
    // 限制滚动范围
    // 将左边界从0改为负数（允许向左滚动超出容器）
timeline.scrollLeft = Math.max(0, Math.min(newScrollLeft, timeline.scrollWidth - timeline.offsetWidth));
});

// 鼠标抬起事件
timeline.addEventListener('mouseup', () => {
    istimeDragging = false;
    timeline.style.cursor = 'grab';
});

// 触摸开始事件
timeline.addEventListener('touchstart', (e) => {
    istimeDragging = true;
    timestartX = e.touches[0].pageX - timeline.offsetLeft;
    timescrollLeft = timeline.scrollLeft;
});

// 触摸移动事件
timeline.addEventListener('touchmove', (e) => {
    if (!istimeDragging) return;
    e.preventDefault();
    const x = e.touches[0].pageX - timeline.offsetLeft;
    const walk = (x - timestartX) * 1;
    const newScrollLeft = timescrollLeft - walk;
    timeline.scrollLeft = Math.max(-900, Math.min(newScrollLeft, timeline.scrollWidth - timeline.offsetWidth));
});

// 触摸结束事件
timeline.addEventListener('touchend', () => {
    istimeDragging = false;
});
// let imgLine=document.querySelector('.swiper-slider');
// imgLine.addEventListener('touchstart', (e) => {
//   console.log('鼠标进入',e);
  
//      // 原有元素动画逻辑
//         imgLine.forEach(element => {
//             if (isInViewport(element)) {
//                 element.classList.add('none-line');
//             }
//         });
// });
  // 添加一些简单的交互效果
        const productCards = document.querySelectorAll('.swiper-slider');
            
            productCards.forEach(card => {
                card.addEventListener('mouseenter', function() {
                  console.log('mouseenter',mouseenter);
                  
                    // 添加悬停类用于追踪
                    this.classList.add('none-line');
                });
                
                card.addEventListener('mouseleave', function() {
                    // 移除悬停类
                    this.classList.remove('none-line');
                });
            });
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        document.querySelector(this.getAttribute('href')).scrollIntoView({
          behavior: 'smooth'
        });
      });
    });
  </script>
</body>

</html>
